<template>
  <div class="mt-12px w-full px-18px py-24px box-border flex flex-col bg-white rounded-16px">
    <div class="flex flex-row h-24px">
      <img src="@/assets/game-info.png" alt="" class="w-24px h-24px" />
      <h2 class="ml-6px h-24px leading-24px text-24px font-bold text-#333333">游戏信息</h2>
    </div>
    <div
      class="mt-16px flex flex-col w-full h-[fit-content] p-18px box-border rounded-16px bg-gradient-to-r from-#F5F5F5"
    >
      <!-- <div class="w-[fit-content] h-[fit-content] cursor-pointer">
        <div
          class="w-180px h-40px bg-#384277 px-20px flex flex-row justify-between items-center rounded-8px"
        >
          <img
            src="@/assets/audio.png"
            alt=""
            class="w-36px h-24px"
          />
          <div class="text-20px font-bold text-white">21’</div>
        </div>
      </div> -->
      <div class="mt-12px w-full text-14px leading-20px text-#525566 break-all">
        {{ selectSkill?.game_info }}
      </div>
    </div>
    <div class="mt-18px w-453px h-253px rounded-16px overflow-hidden">
      <div class="ant-image" style="width: 453px; height: 253px">
        <img
          class="ant-image-img w-453px h-253px object-cover"
          :src="selectSkill?.screenshots"
          style="height: 253px"
        /><!----><!---->
      </div>
      <!---->
    </div>
    <div
      class="mt-18px flex flex-col w-full h-[fit-content] p-18px box-border bg-gradient-to-r from-#F5F5F5 rounded-12px"
    >
      <div class="flex flex-row items-center">
        <img src="@/assets/level.png" alt="level" class="w-20px h-20px" />
        <div class="ml-8px text-14px text-#525566">
          等级: <span class="text-#999999">{{ selectSkill?.rank?.name }}</span>
        </div>
      </div>
      <div class="mt-16px flex flex-row items-center">
        <img src="@/assets/shouxuan.png" alt="level" class="w-20px h-20px" />
        <div class="ml-8px text-14px text-#525566">
          首选角色:
          <span class="text-#999999">{{
            selectSkill?.game_position?.map((item) => item?.name).join('、')
          }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
// import { ref } from 'vue'
defineProps(['selectSkill'])
</script>
<style lang="less" scopeds></style>
